<template>
  <div class="container">
    <header>
      <div class="title" v-text='title'></div>
      <!--      <div class="sub_title">承诺达标合格证管理系统</div>-->
    </header>
    <main>
      <el-row :gutter="20">
        <!--        合格证开具数量-->
        <el-col :span="24">
          <month-count-charts/>
        </el-col>
        <!--        主要农产品统计-->
        <el-col :span="24">
          <main-product-charts class="margin_t20" />
        </el-col>
        <!--        每日合格证开具实时数据-->
        <el-col :xs='24' :sm='24' :md='24' :lg='12' :xl='12'>
          <daily-real-time-charts class="margin_t20" />
        </el-col>
        <!--        区域合格证开具数量排名-->
        <el-col :xs='24' :sm='24' :md='24' :lg='12' :xl='12'>
          <area-sort-certificate-charts class="margin_t20" />
        </el-col>
        <!--        街道统计-->
        <el-col :xs='24' :sm='24' :md='24' :lg='12' :xl='12'>
          <street-charts class="margin_t20" />
        </el-col>
        <!--        街道/镇用户数量统计-->
        <el-col :xs='24' :sm='24' :md='24' :lg='12' :xl='12'>
          <street-user-count-charts class="margin_t20" />
        </el-col>
      </el-row>
    </main>
  </div>
</template>

<script>

import MonthCountCharts from "@/views/certificate/charts/MonthCountCharts.vue";
import MainProductCharts from "@/views/certificate/charts/MainProductCharts.vue";
import DailyRealTimeCharts from "@/views/certificate/charts/DailyRealTimeCharts.vue";
import AreaSortCertificateCharts from "@/views/certificate/charts/AreaSortCertificateCharts.vue";
import StreetCharts from "@/views/certificate/charts/StreetCharts.vue";
import StreetUserCountCharts from "@/views/certificate/charts/StreetUserCountCharts.vue";

export default {
  name:'IndexNjt',
  props: {
    title: {
      type: String,
      require: true
    }
  },
  components: {
    StreetUserCountCharts,
    StreetCharts, AreaSortCertificateCharts, DailyRealTimeCharts, MainProductCharts, MonthCountCharts},
  data() {
    return {}
  },
  created() {
    this.$store.dispatch('getSelectUnitId')
    this.$store.dispatch('getYearList')
    this.$store.dispatch('getUnitConfigList')
  },
}
</script>


<style scoped lang="scss">
.container {
  padding: 10px;

  header {
    margin: 10px 0;
    padding: 20px 0;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 10px;
    box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, .1);

    .title {
      font-size: 30px;
      margin-bottom: 10px;
    }

    .sub_title {
      font-size: 24px;
      margin-bottom: 10px;
    }
  }

  .margin_t20 {
    margin-top: 20px;
  }
}
</style>
